<script setup lang="ts">
import {defineComponent, PropType} from "vue";
import {useCheckTypeStore} from "@/store/modules/checkType";
import {AppointmentApi, AppointmentVO} from "@/api/ecg/appointment";
import {formatTimeslot} from "@/utils/formatter";
import {calculateAge, formatTimestamp, isCurrentDay} from "@/utils/dateUtil";
import {QueueSequenceApi, QueueSequenceVO} from "@/api/ecg/queuesequence";
import {formatDate} from "../../../utils/formatTime";
import { cloneDeep } from 'lodash-es'
import {hiprint} from "vue-plugin-hiprint";
import {calGender, getBookBeginTime} from "@/utils";

defineComponent({
  name: 'CheckItemPanel'
})

const props = defineProps({
  appointment: {
    type: Object as PropType<AppointmentVO>,
    required: true
  }
})

const emit = defineEmits(['event_appoint_confirm']) // 定义 success 事件，用于操作成功后的回调

const checkTypeStore = useCheckTypeStore();

const checkTypeTimeslotList = ref<QueueSequenceVO>()
const bookTimeSlotVip = ref<number>()

const bookSeqNum = ref<number>()

const _confirmAppointment = async () => {
  if (!isCurrentDay(props.appointment.bookDate)) {
    ElMessageBox.confirm(
        '非当天预约项，确定要今天检查吗？',
        'Warning',
        {
          confirmButtonText: '好的',
          cancelButtonText: '不用',
          type: 'warning',
        }
    )
        .then(async () => {
          const tempAppointment = cloneDeep(props.appointment)
          if (undefined !== bookTimeSlotVip.value && null !== bookTimeSlotVip.value) {
            tempAppointment.bookTimeslot = bookTimeSlotVip.value
          }
          const data = await AppointmentApi.confirmAppointmentVip(tempAppointment)
          bookSeqNum.value = data
          // 发送操作成功的事件
          emit('event_appoint_confirm')
          _printNote()
          ElNotification({
            title: '温馨提示',
            message: data,
            type: 'info'
          })
        })
        .catch(() => {
/*
          ElNotification({
            title: '温馨提示',
            message: '确认失败',
            type: 'warning'
          })
*/
        })
  } else if (undefined !== bookTimeSlotVip.value && null !== bookTimeSlotVip.value && props.appointment.bookTimeslot !== bookTimeSlotVip.value) {
    ElMessageBox.confirm(
        '当天预约项，确定要走VIP吗？',
        'Warning',
        {
          confirmButtonText: '好的',
          cancelButtonText: '不用',
          type: 'warning',
        }
    )
        .then(async () => {
          const tempAppointment = cloneDeep(props.appointment)
          if (undefined !== bookTimeSlotVip.value && null !== bookTimeSlotVip.value) {
            tempAppointment.bookTimeslot = bookTimeSlotVip.value
          }
          const data = await AppointmentApi.confirmAppointmentVip(tempAppointment)
          bookSeqNum.value = data
          // 发送操作成功的事件
          emit('event_appoint_confirm')
          _printNote()
          ElNotification({
            title: '温馨提示',
            message: data,
            type: 'info'
          })
        })
        .catch(() => {
          /*
                    ElNotification({
                      title: '温馨提示',
                      message: '确认失败',
                      type: 'warning'
                    })
          */
        })
  } else {
    const data = await AppointmentApi.confirmAppointment(props.appointment)
    bookSeqNum.value = data
    // 发送操作成功的事件
    emit('event_appoint_confirm')
    _printNote()
    ElNotification({
      title: '温馨提示',
      message: data,
      type: 'info'
    })
  }
}

const _printNote = async (printMode?: number) => {
  console.info( props.appointment )

// 引入后使用示例
  hiprint.init({
    //    host: 'http://192.168.2.100:17521',
    token: '111111'
  });
// 下列方法都是没有拖拽设计页面的, 相当于代码模式, 使用代码设计页面
// 想要实现拖拽设计页面,请往下看 '自定义设计'
  var hiprintTemplate = new hiprint.PrintTemplate();  // 可传参数
  //var panel = hiprintTemplate.addPrintPanel({ width: 100, height: 130, paperFooter: 340, paperHeader: 10 }); 导致走三页
  var panel = hiprintTemplate.addPrintPanel({ width: 140, height: 130, paperNumberDisabled:true});
//文本
  const checkTypeName = checkTypeStore.getCheckTypeName(props.appointment.bookCheckType)
  panel.addPrintText({ options: { width: 150, height: 15, top: 2, left: 10, title: checkTypeName, textAlign: 'center', fontSize: 15, fontFamily: '微软雅黑',  fontWeight: '700', } });
  const patientBaisc = props.appointment.patName + "  " + calGender(props.appointment.patGender) + "  " + calculateAge(props.appointment.patBirthday) + "岁"
  panel.addPrintText({ options: { width: 150, height: 15, top: 27, left: 10, title: patientBaisc, textAlign: 'center' , fontSize: 15, fontFamily: '微软雅黑', fontWeight: '700', } });
  const ward_bed = props.appointment.patWardDesc + "-" + props.appointment.patBedNo
  panel.addPrintText({ options: { width: 150, height: 15, top: 52, left: 10, title: ward_bed, textAlign: 'center', fontSize: 15, fontFamily: '微软雅黑', fontWeight: '700', } });
  const bookTime = formatTimestamp(props.appointment.bookDate) + " " + getBookBeginTime(props.appointment.bookTimeslot)
  panel.addPrintText({ options: { width: 150, height: 15, top: 77, left: 10, title: bookTime, textAlign: 'center', fontSize: 15, fontFamily: '微软雅黑', fontWeight: '700', } });
  //panel.addPrintText({ options: { width: 150, height: 12, top: 58, left: 10, title: props.appointment.patId, textAlign: 'center', fontSize: 8 } });
  //panel.addPrintText({ options: { width: 150, height: 12, top: 72, left: 10, title: props.appointment.patMobile, textAlign: 'center', fontSize: 8, fontFamily: '微软雅黑',  fontWeight: '700', } });

  // 条码 就诊流水号
  panel.addPrintText({ options: { width: 150, height: 22, top: 107, left: 10, title: props.appointment.episodeId, textType: 'barcode' } });

  // 右侧 Pane 输出
  const _bookSeqNum = bookSeqNum.value??props.appointment?.bookSeqNum
  panel.addPrintText({ options: { width: 130, height: 20, top: 7, left: 170, title: ''+_bookSeqNum, textAlign: 'center', fontSize: 30, fontFamily: '微软雅黑',  fontWeight: '1200' } });

  // 注意事项
  const notes = checkTypeStore.getCheckTypeNotes(props.appointment.bookCheckType)
  panel.addPrintLongText({ options: { width: 130, height: 80, top: 35, left: 170, lineHeight: 15, title: notes, textAlign: 'center', fontSize: 13, fontFamily: '微软雅黑',  fontWeight: '700', } });

//打印
  if (undefined === printMode)
    hiprintTemplate.print2([{}]); // 可以传 [定位参数]  http://https://ccsimple.github.io/sv-print-docs/config/template.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E8%AE%BE%E8%AE%A1%E4%BD%BF%E7%94%A8%E7%A4%BA%E4%BE%8B
  else
    hiprintTemplate.print([{}]);
}

onMounted( async () => {
  const data = await QueueSequenceApi.getTimeslotByCheckType(props.appointment.bookCheckType)
  console.info( data )
  checkTypeTimeslotList.value = data
})

</script>

<template>
  <el-card style="width: 200px" shadow="hover" >
    <template #header>{{checkTypeStore.getCheckTypeName(appointment.bookCheckType)}}</template>
    <div>{{formatDate(appointment.bookDate, 'YYYY-MM-DD')}}</div>
    <div>{{formatTimeslot(appointment.bookTimeslot)}}</div>

<!--    <el-select v-if="!isCurrentDay(appointment.bookDate)" v-model="bookTimeSlotVip" placeholder="请选择预约时间段">-->
    <el-select v-model="bookTimeSlotVip" clearable placeholder="请选择预约时间段">
      <el-option
          v-for="item in checkTypeTimeslotList"
          :key="item.id"
          :label="formatTimeslot(item.timeSlot)"
          :value="item.timeSlot"
          :disabled="item.queueVipNo === item.queueVipFull"
      />
    </el-select>
    {{bookSeqNum??appointment.bookSeqNum}}
    <el-divider/>
    <el-button @click="_confirmAppointment" :type="isCurrentDay(appointment.bookDate)?'primary':'warning'"><Icon icon="ep:list" class="mr-5px" /> 排队 </el-button>
    <el-button @click="_printNote(8)"><Icon icon="ep:printer" class="mr-5px" /> 打印号 </el-button>
  </el-card>
</template>

<style scoped lang="scss">
.el-card ::v-deep {
  .el-card__header {
    background-color: var(--el-color-primary-light-3);
    padding: 2px;
    text-align: center;
  }
  .el-card__body {
    //background-color: var(--el-color-primary-light-3);
    padding: 4px;
    text-align: center;
  }
}
</style>
